<template>
  <div class="app">
    <h2>我是App组件(父组件)</h2>
    <h3>School组件（子组件）给我的学校名是：{{schoolName}}</h3>
    <hr>
    <!-- 给组件实例对象（vc）绑定自定义事件的第一种方式（常用） -->
    <!-- <School @getName="demo"/> -->
    <!-- 给组件实例对象（vc）绑定自定义事件的第二种方式（常用） -->
    <School ref="school"/>
      <br>
  </div>
</template>

<script>
import School from './components/School'
export default {
  name: 'App',
  components: { School },
  data() {
    return {
      schoolName: '',
    }
  },
  mounted() {
    this.$refs.school.$on('getName', (value) => {
      this.schoolName = value //写成箭头函数是将this指向App的VueComponent
      //写成Vue管理普通函数则this指向School的VueComponent，无法将schoolName的值获取到。
    })
  },
}
</script>

<style>
.app {
  background-color: gray;
  padding: 20px;
}
</style>